import {
  StyleSheet,
  View,
  Text,
  FlatList,
  TouchableOpacity,
  useWindowDimensions,
} from 'react-native';
import {useContext, useState, useEffect} from 'react';
import {ThemeContext} from '../../../components/ThemeContextProvider';
import CommonModal from '../../../components/CommonModal';
import {getStoreListApi} from '../../../api/api';
import AsyncStorage from '@react-native-community/async-storage';
import {useNavigation} from '@react-navigation/native';
import EmptyListComponent from '../../../components/EmptyListComponent';
import {useDispatch, useSelector} from 'react-redux';
import {setStoreid} from '../../../store/reducers/user';
export default function ({show, setShow}) {
  const {theme} = useContext(ThemeContext);
  const app_id = useSelector(state => state.user.app_id);
  const dispatch = useDispatch();
  const navigation = useNavigation();
  const {height} = useWindowDimensions();
  const styles = StyleSheet.create({
    card: {
      marginTop: 10,
      padding: 20,
      width: 400,
      backgroundColor: theme.bgGrey,
      borderWidth: 1,
      borderColor: theme.dividerColor,
      borderRadius: 12,
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    iconfont: {
      fontFamily: 'iconfont',
      fontSize: 20,
    },
    nameCell: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    name: {
      fontSize: 16,
      color: theme.fontColor,
      marginRight: 10,
      maxWidth: 250,
    },
    tagSuccess: {
      paddingVertical: 4,
      paddingHorizontal: 8,
      borderRadius: 2,
      borderWidth: 1,
      borderColor: theme.primaryColor,
      color: theme.primaryColor,
      backgroundColor: theme.tagColor,
      fontSize: 12,
    },
    tagError: {
      paddingVertical: 2,
      paddingHorizontal: 4,
      borderRadius: 2,
      borderWidth: 1,
      borderColor: theme.auxColor,
      color: theme.primaryColor,
      backgroundColor: '#ffdada',
      fontSize: 12,
    },
    address: {
      fontSize: 12,
      color: theme.font2Color,
      marginTop: 4,
      width: 300,
    },
    scrollH: {
      flex: 1,
      width: '100%',
    },
  });
  const checkHandle = async store_id => {
    dispatch(setStoreid(store_id));
    await AsyncStorage.setItem('store_id', store_id + '');
    setShow(false);
    navigation.replace('Cashier');
  };
  const StoreCard = ({address, store_id, status, name}) => {
    return (
      <TouchableOpacity
        style={styles.card}
        activeOpacity={0.7}
        onPress={() => checkHandle(store_id)}>
        <View>
          <View style={styles.nameCell}>
            <Text style={styles.name} numberOfLines={1}>
              {name}
            </Text>
            {status === 1 ? (
              <Text style={styles.tagSuccess}>营业中</Text>
            ) : (
              <Text style={styles.tagError}>未营业</Text>
            )}
          </View>
          <Text style={styles.address} numberOfLines={1}>
            {address}
          </Text>
        </View>
        <Text style={styles.iconfont}>{'\ue67a'}</Text>
      </TouchableOpacity>
    );
  };
  const [list, setList] = useState([]);
  const [pageInfo, setPageInfo] = useState({
    page: 1,
    limit: 20,
  });
  const [total, setTotal] = useState(0);
  const getData = async () => {
    const {data, total} = await getStoreListApi({
      ...pageInfo,
      app_id,
    });
    setList(() => {
      if (pageInfo.page === 1) {
        return data;
      } else {
        return list.concat(data);
      }
    });
    setTotal(total);
  };
  useEffect(() => {
    getData();
  }, []);
  /**
   * 下滑加载数据
   */
  const onScroll = () => {
    if (total > pageInfo.page * pageInfo.limit) {
      setPageInfo(() => {
        return {page: pageInfo.page++, limit: 20};
      });
      getData();
    }
  };
  return (
    <CommonModal show={show} setShow={setShow} title="选择门店" width={440}>
      <View style={{height: height * 0.7}}>
        <FlatList
          style={styles.scrollH}
          data={list}
          onEndReached={onScroll}
          renderItem={({item, index, separators}) => {
            return (
              <StoreCard
                key={item.id}
                name={item.name}
                address={item.address}
                status={item.status}
                store_id={item.store_id}></StoreCard>
            );
          }}
          ListEmptyComponent={
            <View style={{paddingTop: 100}}>
              <EmptyListComponent text="无可选门店"></EmptyListComponent>
            </View>
          }></FlatList>
      </View>
    </CommonModal>
  );
}
